<template>
  <div>
    <button @click="goto">跳转路由</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'RouteTest',
  setup () {
    // router是全局路由对象
    let router = useRouter()
    let name = ref('Jack')
    let num = ref(10)
    let obj = ref({
      msg: 'Start'
    })
    console.log(router);
    let goto = () => {
      // 路由跳转，可以直接写路径，也可以传入对象
      // router.push('/about')
      // router.push({
      //   path: '/about'
      // })

      // 1.query传参
      // router.push({
      //   path: '/about',
      //   query: {
      //     name: name.value,
      //     num: num.value,
      //     obj: JSON.stringify(obj)
      //   }
      // })

      // 2.params传参
      router.push({
        name: 'About',
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj.value)
        }
      })
      // 注意：query传参时，push中可以使用path和name，而使用params时，只能使用name
    }
    return {
      goto
    }
  }
})
</script>

<style lang="scss" scoped>
</style>